<template>
  <view class="quick-order-page">
	<view style="padding:10rpx 25rpx;">
		<u-subsection :list="list" fontSize="26" :current="current" @change="sectionChange"></u-subsection>
	</view>
    <!-- 表单容器（卡片化设计） -->
    <view class="form-card">
      <!-- 所在学校（下拉增强） -->
      <view class="form-item" v-if="current === 0">
        <text class="label">所在学校</text>
        <picker 
          mode="selector" 
          :range="schoolList" 
          :value="form.school_name" 
          @change="onSchoolChange"
        >
          <view class="picker-wrap">
            <text class="picker-text">{{ schoolList[schoolIndex] }}</text>
            <image class="arrow-icon" src="/static/icons/arrow-down.png"></image>
          </view>
        </picker>
      </view>

      <!-- 办理套餐（下拉增强） -->
      <view class="form-item">
        <text class="label">办理套餐</text>
        <picker 
          mode="selector" 
          :range="packageList" 
          :value="form.package_id" 
          @change="onPackageChange"
        >
          <view class="picker-wrap">
            <text class="picker-text">{{ packageList[packageIndex] }}</text>
            <image class="arrow-icon" src="/static/icons/arrow-down.png "></image>
          </view>
        </picker>
      </view>

      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名</text>
        <input 
          class="input-field" 
          v-model="form.real_name" 
          placeholder="请输入姓名"
          @input="handleInput"
        />
      </view>

      <!-- 老手机号 -->
      <view class="form-item">
        <text class="label">老手机号</text>
        <input 
          class="input-field" 
          v-model="form.old_mobile" 
          placeholder="请输入老手机号"
          maxlength="11"
          @input="handleInput"
        />
      </view>

      <!-- 新手机号 -->
      <view class="form-item">
        <text class="label">新手机号</text>
        <input 
          class="input-field" 
          v-model="form.mobile" 
          placeholder="请输入新手机号"
          maxlength="11"
          @input="handleInput"
        />
      </view>
	 

      <!-- 服务密码 -->
      <view class="form-item">
        <text class="label">服务密码</text>
        <input 
          class="input-field" 
          v-model="form.service_pwd" 
          placeholder="请输入服务密码"
          @input="handleInput"
        />
      </view>

      <!-- 宽带地址 -->
      <view class="form-item">
        <text class="label">宽带地址</text>
        <input 
          class="input-field" 
          v-model="form.dorm" 
          placeholder="请输入宽带地址"
          @input="handleInput"
        />
      </view>

      <!-- 办理时间 -->
      <view class="form-item">
        <text class="label">办理时间</text>
		<view class="input-field" @click="show = true"> {{form.handle_date || '选择办理时间'}}</view>
		<u-calendar :show="show" @close="show = false" title="选择办理时间" @confirm="confirm" mode="single" ></u-calendar>
      </view>
	
      <!-- 身份证正面 -->
      <view class="form-item">
        <text class="label">身份证正面</text>
        <view class="upload-group">
          <view 
            class="upload-box" 
			:style="{ backgroundImage: `url(${form.idcard_image || defaultImg})` }"
            @click="chooseImage('idcard_image')"
          >
            <view class="upload-masks" v-if="!form.idcard_image">
				<image src="/static/add_idcard.png" style="width: 100%;height: 100%;position: absolute;top: 0;left:0;"></image>
              <text class="upload-icon">+</text>
              <text class="upload-tip">点击上传</text>
            </view>
          </view>
          <text class="upload-desc">请上传清晰的身份证正面照片</text>
        </view>
      </view>
	<!-- 身份证反面 -->
      <view class="form-item">
        <text class="label">身份证反面</text>
        <view class="upload-group">
          <view 
            class="upload-box" 
			:style="{ backgroundImage: `url(${form.idcard_image_b || defaultImg})` }"
            @click="chooseImage('idcard_image_b')"
          >
            <view class="upload-masks" v-if="!form.idcard_image_b">
				<image src="/static/add_idcardb.png" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"
				></image>
              <text class="upload-icon">+</text>
              <text class="upload-tip">点击上传</text>
            </view>
          </view>
          <text class="upload-desc">请上传清晰的身份证反面照片</text>
        </view>
      </view>

      <!-- 公安码图片 -->
      <view class="form-item">
        <text class="label">公安码图片</text>
        <view class="upload-group">
          <view 
            class="upload-box" 
            :style="{ backgroundImage: `url(${form.public_security_code || defaultImg})` }"
            @click="chooseImage('public_security_code')"
          >
            <view class="upload-masks" v-if="!form.public_security_code">
              <text class="upload-icon">+</text>
              <text class="upload-tip">点击上传</text>
            </view>
          </view>
          <text class="upload-desc">请上传清晰的公安码图片</text>
        </view>
      </view>

      <!-- 承诺书 -->
      <view class="form-item">
        <text class="labels">承诺书</text>
        <view class="upload-group">
          <view 
            class="upload-box" 
            :style="{ backgroundImage: `url(${form.letter_of_commitment || defaultImg})` }"
            @click="chooseImage('letter_of_commitment')"
          >
            <view class="upload-masks" v-if="!form.letter_of_commitment">
              <text class="upload-icon">+</text>
              <text class="upload-tip">点击上传</text>
            </view>
          </view>
          <text class="upload-desc">请上传完整的承诺书扫描件</text>
        </view>
      </view>

      <!-- 手持承诺书 -->
      <view class="form-item">
        <text class="labels">手持承诺书</text>
        <view class="upload-group">
          <view 
            class="upload-box" 
            :style="{ backgroundImage: `url(${ form.portrait || defaultImg})` }"
            @click="chooseImage('portrait')"
          >
            <view class="upload-masks" v-if="!form.portrait">
              <text class="upload-icon">+</text>
              <text class="upload-tip">点击上传</text>
            </view>
          </view>
          <text class="upload-desc">请上传清晰的手持承诺书照片</text>
        </view>
      </view>

      <!-- 套餐备注 -->
      <view class="form-item">
        <text class="labels">套餐备注</text>
        <textarea 
          class="textarea-field" 
          v-model="form.remark" 
          placeholder="请输入套餐备注（选填，最多200字）"
          maxlength="200"
          @input="handleInput"
        />
        <text class="counter">{{ form.remark.length }}/200</text>
      </view>

      <!-- 操作按钮组 -->
      <view class="btn-group">
        <button class="submit-btn" @click="submitForm">确认提交</button>
        <!-- <button class="cancel-btn" @click="goBack">取消</button> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  schoolIndex:0,
	  packageIndex:0,
	  show:false,
      form: {
        school_name: '',
        package_id: '',
		package_name:'',
        real_name: '',
        old_mobile: '',
        mobile: '',
        service_pwd: '',
        dorm: '',//宿舍
        idcard_image: '',//身份证正面
        idcard_image_b: '',//身份证反面
        public_security_code: '',//公安码图片
        letter_of_commitment: '',//承若书
        portrait: '',//手持承诺书
        remark: '',//备注
		handle_date:''
      },
      schoolList: [],
	  school: [],
      packageList: [],
	  package: [],
      defaultImg: '',
      rules: {
        school_name: { required: true, message: '请选择所在学校' },
        package_id: { required: true, message: '请选择办理套餐' },
        real_name: { required: true, message: '姓名不能为空' },
        old_mobile: { required: true, message: '老手机号不能为空' },
        mobile: { required: true, message: '新手机号不能为空' },
        service_pwd: { required: true, message: '服务密码不能为空' },
        dorm: { required: true, message: '宽带地址不能为空' },
		handle_date:{ required: true, message: '请选择办理时间' },
        idcard_image: { required: true, message: '请上传身份证正面' },
		idcard_image_b: { required: true, message: '请上传身份证反面' },
        public_security_code: { required: true, message: '请上传公安码图片' },
      },
	  rules1: {
	    package_id: { required: true, message: '请选择办理套餐' },
	    real_name: { required: true, message: '姓名不能为空' },
	    old_mobile: { required: true, message: '老手机号不能为空' },
	    mobile: { required: true, message: '新手机号不能为空' },
	    service_pwd: { required: true, message: '服务密码不能为空' },
	    dorm: { required: true, message: '宽带地址不能为空' },
	  		handle_date:{ required: true, message: '请选择办理时间' },
	    idcard_image: { required: true, message: '请上传身份证正面' },
	  		idcard_image_b: { required: true, message: '请上传身份证反面' },
	    public_security_code: { required: true, message: '请上传公安码图片' },
	  },
	  list: ['校园套餐', '大递卡', '骑士卡','会展','逸景','南明'],
	  current:0
    }
  },
  onLoad() {
  	this.getSchool()
	this.getPackage()
  },
  methods: {
	  sectionChange(index){
		  this.current = index
		  console.log('dasdsada',index)
		  this.getPackage()
	  },
	confirm(e){
		this.form.handle_date = e[0]
		this.show = false
	},
	  async getSchool(){
	  	const res = await this.$api.get('/School/index','',true)
	  	if(res.data.code === 200) {
	  		let  data = res.data.data
			data.forEach(item => {
				this.schoolList.push(item.school_name)
			})
			this.schoolList.unshift('请选择学校')
	  		this.school = data
			this.packageList.unshift('请选择套餐')
	  	}
	  },
	  async getPackage(){
	  
	  	const params = {
	  		page:1,
	  		limit:100,
			// school_id:this.form.school_id
	  	}
	  	const res = await this.$api.get('/Package/index',params,true)
	  	if(res.data.code === 200) {
			let data = res.data.data
			data.forEach(item => {
				
				this.packageList.push(item.package_name)
			})
			this.package = data
			
	  	}
	  },
    goBack() {
      uni.navigateBack();
    },
    onSchoolChange(e) {
		console.log('学校',e)
	  let index = e.detail.value
	  this.schoolIndex = index
	  this.form.school_name = this.schoolList[index]
    },
    onPackageChange(e) {
	  let index = e.detail.value
	  this.packageIndex = index
      this.form.package_id = this.package[index]?.package_id;
	  console.log('sdaada',this.form)
	  this.form.package_name = this.package[index].package_name;
	  console.log(this.form)
    },
    handleInput() {
      // 可扩展实时校验逻辑
	  // 手机号码格式校验函数
	    const validateMobile = (mobile) => {
	      // 正则表达式：匹配11位数字，以1开头，第二位为3-9（支持中国大陆手机号）
	      const pattern = /^1[3-9]\d{9}$/;
	      return pattern.test(mobile);
	    };
	    if(this.form.mobile.length>10){
			// 校验新手机号格式
			if (!validateMobile(this.form.mobile) ) {
			  uni.showToast({
			    title: '手机号格式不正确，请输入11位有效手机号',
			    icon: 'none',
			    duration: 1000
			  });
			  return false;
			}
		}
		if(this.form.old_mobile.length>10){
			// 校验老手机号格式
			if (!validateMobile(this.form.old_mobile) ) {
			  uni.showToast({
			    title: '手机号格式不正确，请输入11位有效手机号',
			    icon: 'none',
			    duration: 1000
			  });
			  return false;
			}
		}
	    
	    
	    
    },
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
     
		  const response = await this.$api.uploadFile('/Upload/File',res.tempFilePaths[0])
		  if(response.code == 200) {
			  this.form[type] = response.url
		  }
        }
      });
    },
    async submitForm() {
	  if(this.current == 0){
		  for (let key in this.rules) {
		    if (this.rules[key].required && !this.form[key]) {
		      uni.showToast({
		        title: this.rules[key].message,
		        icon: 'none',
		        duration: 1000
		      });
		      return;
		    }
		  }
	  } else {
		  for (let key in this.rules1) {
		    if (this.rules1[key].required && !this.form[key]) {
		      uni.showToast({
		        title: this.rules1[key].message,
		        icon: 'none',
		        duration: 1000
		      });
		      return;
		    }
		  }
	  }
	  
	  // 手机号码格式校验函数
	    const validateMobile = (mobile) => {
	      // 正则表达式：匹配11位数字，以1开头，第二位为3-9（支持中国大陆手机号）
	      const pattern = /^1[3-9]\d{9}$/;
	      return pattern.test(mobile);
	    };
	    
	    // 校验新手机号格式
	    if (!validateMobile(this.form.mobile)) {
	      uni.showToast({
	        title: '新手机号格式不正确，请输入11位有效手机号',
	        icon: 'none',
	        duration: 1000
	      });
	      return false;
	    }
	    
	    // 校验老手机号格式
	    if (!validateMobile(this.form.old_mobile)) {
	      uni.showToast({
	        title: '老手机号格式不正确，请输入11位有效手机号',
	        icon: 'none',
	        duration: 1000
	      });
	      return false;
	    }
      this.form.type = this.current
	  const res = await this.$api.post('/Business/submit',this.form,true)
	  console.log('dasdada',res)
	  if(res.data.code === 200) {
		  this.form.old_mobile = ''
		  this.form.mobile = ''
		  this.form.real_name = ''
		  this.form.service_pwd = ''
		  this.form.dorm = ''
		  this.form.idcard_image = ''
		  this.form.idcard_image_b = ''
		  this.form.letter_of_commitment = ''
		  this.form.portrait = ''
		  this.form.public_security_code = ''
		   setTimeout(() => {
			  uni.showToast({ title: '提交成功', icon: 'success' });
			}, 500);
	  }
    }
  }
}
</script>

<style scoped lang="scss">
/* 页面基础样式 */
.quick-order-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 98rpx;
  padding: 0 32rpx;
  background: linear-gradient(90deg, #2c82c9, #3a9ee6);
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.back-btn {
  font-size: 34rpx;
  color: #fff;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

/* 表单卡片样式 */
.form-card {
  margin: 32rpx;
  padding: 32rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}

/* 表单项通用样式 */
.form-item {
  margin-bottom: 36rpx;
  display: flex;
  flex-direction: column;
}
.labels{
	display: block;
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 16rpx;
}
.label {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
}
.label::before {
  content: '*';
  color: #ff4d4f;
  margin-right: 8rpx;
}

/* 下拉选择器样式 */
.picker-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #e5e5e5;
  border-radius: 10rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  color: #666;
}
.arrow-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 输入框样式 */
.input-field {
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #e5e5e5;
  border-radius: 10rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  color: #333;
}

/* 上传区域样式 */
.upload-group {
  display: flex;
  flex-direction: column;
}
.upload-box {
  width: 640rpx;
  height: 360rpx;
  position: relative;
  border: 1rpx dashed #e5e5e5;
  border-radius: 12rpx;
  background-size: cover;
  background-position: center;
  margin-bottom: 16rpx;
}
.upload-masks {
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-icon {
  font-size: 60rpx;
  color: #999;
  margin-bottom: 12rpx;
}
.upload-tip {
  font-size: 24rpx;
  color: #999;
}
.upload-desc {
  font-size: 24rpx;
  color: #666;
}

/* 文本域样式 */
.textarea-field {
  min-height: 120rpx;
  border: 1px solid #e5e5e5;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #333;
  line-height: 44rpx;
  resize: none;
}
.counter {
  align-self: flex-end;
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
}

/* 按钮组样式 */
.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 24rpx;
  margin-top: 40rpx;
}
.submit-btn {
  width: 600rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(90deg, #2c82c9, #3a9ee6);
  color: #fff;
  font-size: 30rpx;
  border-radius: 44rpx;
  box-shadow: 0 6rpx 16rpx rgba(44, 130, 201, 0.3);
}
.cancel-btn {
  width: 200rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #fff;
  color: #2c82c9;
  font-size: 30rpx;
  border: 2rpx solid #2c82c9;
  border-radius: 44rpx;
}
</style>